<template>
	<view>
		<u-no-network></u-no-network>
		<view class="header bg-gradual-blue u-skeleton-fillet" style="padding-bottom: 176rpx;">
			<image class="banner" src="/static/images/banner5.png" mode="widthFix"
				style="width: 690rpx;height: 300rpx;"></image>
			<view class="mt2">
				<view class="h-box">
					<u-subsection :animation="false" @change="tabChange" active-color="#02d5d6" :list="tabList" :current="tabIndex"></u-subsection>
				</view>
			</view>
		</view>
		<!-- 上门回收 -->
		<onlineRecovery ref="onlineRecovery" v-if="tabIndex == 0" @tab="tabChange"></onlineRecovery>
		<!-- 自送网点 -->
		<shopRecovery ref="shopRecovery" v-if="tabIndex == 1" @tab="tabChange"></shopRecovery>
		<!-- 底部tabbar -->
		<common-tabbar :current="1"></common-tabbar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import onlineRecovery from './components/onlineRecovery.vue'
	import shopRecovery from './components/shopRecovery.vue'
	
	export default {
		components:{
			onlineRecovery,
			shopRecovery
		},
		data() {
			return {
				current: null,
				tabIndex: 0,
				tabList: [
					{
						name: '上门回收'
					},
					{
						name: '自送网点'
					}
				]
			}
		},
		onLoad(opt) {
			console.log('apply页面onLoad参数:',opt)
			// #ifdef MP-WEIXIN
			this.version = wx.getAccountInfoSync().miniProgram.version
			// #endif
			// this.tid = opt.tid
			
			// // 判断是否有回收码
			// if(opt.barcode){
			// 	this.order.qrcode = opt.barcode
			// }
		},
		computed:{
			...mapState({
				header: state => state.Authorization,
				Authorization: state => state.Authorization,
				userdetail: state => state.userdetail,
			}),
			applyIndex(){
				return getApp().globalData.applyIndex
			}
		},
		watch:{
			Authorization(val){
				// if(val == 1){
					this.$nextTick(()=>{
						this.$refs.onlineRecovery.initData()
					})
				// }
			}
		},
		onShow() {
			this.current = 1
			if(getApp().globalData.applyIndex == 1){
				this.tabIndex = 1
			}else{
				this.tabIndex = 0
			}
		},
		// onHide() {
		// 	this.current = null
		// },
		methods:{
			tabChange(e){
				this.tabIndex = e
				getApp().globalData.applyIndex = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		color: #fff;
		padding: 60rpx 30rpx 160rpx 30rpx;
		height: 200rpx;
		/* #ifdef MP-WEIXIN */
		padding-top: calc(44px + 60rpx + var(--status-bar-height));
		/* #endif */
		border-bottom-right-radius: 60rpx;
		box-sizing: content-box;
		position: relative;
	
		.back {
			position: absolute;
			top: 60rpx;
			/* #ifdef MP-WEIXIN */
			top: calc(60rpx + var(--status-bar-height));
			/* #endif */
			z-index: 99;
		}
	
		.h-box {
			position: absolute;
			width: 92%;
			/* padding: 4px; */
			bottom: 33rpx;
		}
	}
</style>